<template>
  <div class="cop-statistics">
    <div class="top-card">
      <div class="card-item">
        <div class="img-box">
          <img :src="capacity" alt="" />
        </div>
        <div class="content-box">
          <span>当班合计产能</span>
          <span>{{ Math.round(totalYarnLength) }} <em>米</em></span>
        </div>
      </div>
      <div class="card-item">
        <div class="img-box">
          <img :src="output" alt="" />
        </div>
        <div class="content-box">
          <span>当班合计产出落数</span>
          <span>{{ materialAndLSCountDatas }} <em>个</em></span>
        </div>
      </div>
    </div>
    <BasicCard style="margin-bottom: 20px">
      <BasicVxeTable ref="gridRef" v-bind="gridOption" v-on="gridEvents">
        <template #doffingLengthAvgSlot="{ row }"
          >{{
            row.doffingLengthAvg == null
              ? row.doffingLengthAvg
              : parseFloat(row.doffingLengthAvg).toFixed(2)
          }}
        </template>
      </BasicVxeTable>
    </BasicCard>
    <BasicCard>
      <BasicVxeTable ref="gridRefDetail" v-bind="gridOptionDetail">
        <template #doffingLengthAvgSlot="{ row }"
          >{{
            row.doffingLengthAvg == null
              ? row.doffingLengthAvg
              : parseFloat(row.doffingLengthAvg).toFixed(2)
          }}
        </template>
      </BasicVxeTable>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import type { VxeGridListeners } from 'vxe-table'
  import capacity from '@/assets/images/device-monitor/cop-capacity.png'
  import output from '@/assets/images/device-monitor/cop-output.png'
  import { StatisticsReportRowVO, DetailsReportRowVO } from '../../types'
  import { StatisticsReportTableColumns, DetailsReportTableColumns } from '../../data'

  import { postCuShaShuJuTongJi } from '@/api/shengChanJianShi'

  const { t } = useI18n()
  const materialIds = ref([])
  const totalYarnLength = ref()
  const materialAndLSCountDatas = ref()
  const statisticsList = ref<StatisticsReportRowVO[]>([])
  const detailsList = ref<DetailsReportRowVO[]>([])

  const gridOption = reactive<BasicGridProps>({
    maxHeight: 500,
    extraConfig: {
      title: t('custom.统计报表'),
      isCustom: true,
      isExport: false,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `cop-statistics`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    proxyConfig: {
      //   autoLoad: false,
      ajax: {
        query: () => {
          // 默认接收 Promise<any[]>
          return getStatisticsReportList()
        }
      }
    },
    columns: StatisticsReportTableColumns
  })

  const getStatisticsReportList = () => {
    return new Promise<StatisticsReportRowVO[]>((resolve) => {
      postCuShaShuJuTongJi({
        tsIdStart: '25071001',
        tsIdEnd: '25071001',
        materialIds: [
          '152ed61a-fe84-8e64-45e3-3a0bd017f251',
          '17eeffed-aad9-201d-23a1-3a0f4fc99df2',
          '3c3c4f1e-52ec-4da2-603d-3a08d1bef26a',
          'ad13e0f1-8843-7c8a-2308-3a16b1d71be5'
        ]
      }).then((res: any) => {
        // this.columns2[this.columns2.length - 1].title =
        //   '定量(' +
        //   this.$danWeiZhuanHuan[res.copReportStatistics[0].details[0].weightPerLengthUnit] +
        //   ')'
        // this.columns[this.columns.length - 1].title =
        //   '定量(' +
        //   this.$danWeiZhuanHuan[res.copReportStatistics[0].details[0].weightPerLengthUnit] +
        //   ')'
        statisticsList.value = res.copReportStatistics.sort((a, b) => {
          return b.yarnLength - a.yarnLength
        })
        detailsList.value = statisticsList.value[0].details
        gridOptionDetail.data = statisticsList.value[0].details

        totalYarnLength.value = res.totalYarnLength
        materialAndLSCountDatas.value = res.materialAndLSCountDatas

        resolve(statisticsList.value)
      })
    })
  }

  const gridEvents: VxeGridListeners<StatisticsReportRowVO> = {
    cellClick({ row }) {
      gridOptionDetail.data = row.details
    }
  }

  const gridOptionDetail = reactive<BasicGridProps>({
    maxHeight: 500,
    extraConfig: {
      title: t('custom.详情报表'),
      isCustom: true,
      isExport: false,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `cop-statistics-detail`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    data: detailsList.value,
    columns: DetailsReportTableColumns
  })
</script>
<style scoped lang="scss">
  .top-card {
    display: flex;
    margin-bottom: 20px;

    .card-item {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      height: 120px;
      line-height: 120px;
      padding: 20px;
      text-align: center;
      box-sizing: border-box;
      background-color: #fff;

      .img-box {
        width: 80px;
        height: 80px;
        margin-right: 12.5%;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .content-box {
        display: flex;
        flex-direction: column;
        text-align: left;
        span {
          height: 30px;
          line-height: 30px;
          color: #4f5759;
          font-size: 14px;

          em {
            font-size: 12px;
          }
        }

        span:last-child {
          font-size: 20px;
          color: rgba($color: #000000, $alpha: 0.9);
        }
      }
    }
    .card-item:first-child {
      margin-right: 24px;
    }
  }

  :deep(.highlight) {
    color: #74c239;
  }
</style>
